<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
    <style>
        .aa{
            border: 5px red solid;
        }
        .bb{
            border: 5px greenyellow solid;
        }
    </style>
</head>
<body >
    <div id="app">

        <h2>{{msg}}</h2>

        <!--vue 属性绑定  v-bind  简化  : -->
        <img :width="width" :src="src" :title="title" @mouseover="change" @mouseout="recover" :class="cls">

    </div>
</body>
</html>
<!--引入vue js文件-->
<script src="../js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//指定vue实例作用范围,
        data:{    //用来给vue实例定义数据
            msg:"hello vue",
            src:"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3304636980,3031862950&fm=26&gp=0.jpg",
            cls:"aa",
            title:"唯美女生...",
            width:200,
        },
        methods:{//用来给vue实例定义事件处理函数
            change(){ //改变图片路径
                this.src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3641625587,4126877900&fm=26&gp=0.jpg";
                this.cls = "bb";
                this.title = "二次元超唯美少女..."
                this.width = 200
            },
            recover(){
                this.src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3304636980,3031862950&fm=26&gp=0.jpg";
                this.cls = "aa";
                this.title = "唯美女生...";
                this.width = 100
            }
        }
    });
</script>